<template>
  <div class="gou">
   <ul>
   	<li>
   		<div class="gouwu_quan">
   			 <el-checkbox v-model="checked"></el-checkbox>
   			 <div class="gouwu_right">
   			 	<dl>
   			 		<dt><img :src="arrz.s_url"/></dt>
   			 		<dd>
   			 			<p>{{arrz.name}}</p>
   			 			<div class="">
   			 				<p>¥{{arrz.price}}</p>
   			 				<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
   			 			</div>
   			 		</dd>
   			 	</dl>
   			 	<div class="xiao">
			<p><span><font color='#26A2FF'>{{arrz.listProActinfo[0].bat_name}}</font></span>{{arrz.listProActinfo[0].infoa_name}}</p>
			<p><span><font color='#26A2FF'>{{arrz.listProActinfo[1].bat_name}}</font></span>{{arrz.listProActinfo[1].infoa_name}}</p>
			
		</div>
   			 </div>
   		</div>
   	</li>
  
   </ul>
   <div class="cankao">
   	<p>/为你推荐/</p>
   	<div class="tuijian">
   		<dl v-for="(vaule,index) in arr"><router-link to="/xianQing">
	   		<dt><img :src="vaule.url"/></dt>
	   		<dd>
	   			<p>{{vaule.name}}</p>
	   			<p><font color=red>{{vaule.price}}</font></p>	   			 
	   		</dd>
	   		</router-link>
	   	</dl>
   	</div>
   	
   </div>
  </div>
</template>

<script>
	import $ from 'jquery';
	import Router from 'vue-router';
	import axios from 'axios';
export default {
  name: 'gou',
  data () {
    return {
      arr:[],
      arrz:[],
       checked: true,
        num1: 1
    }
  },
methods:{
	handleChange(value) {
        console.log(value);
     },
	get(){
    		var _this = this;	
    		eventBus.$on('data',function(val){
    			console.log(val)
    			_this.arr = val
    		})
    	},
	aab(){
		var _this = this;
		axios.get("http://localhost:8080/static/data/03_2.json").then(function(data){
			_this.arr = data.data.msg;
			console.log(data);
		})
		axios.get('http://localhost:8080/static/data/05-2.json').then(function(data){
    				_this.arrz = data.data.msg.productShows[0]
    			console.log(_this.arrz)
    		})
		
	}
},
mounted(){
	this.aab()
	this.get()
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.gou{
		margin-top:35px;
	}
.tuijian{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background: #f5f5f5;
}
.tuijian dl{
	width: 49.8%;
	display: flex;
	background: white;
	flex-direction:column;
	margin-bottom: 2px;
}
.tuijian dl dt{
	width: 100%;
}
.tuijian dl dt img{
	width: 100%;
}

/*购物布局*/
.gouwu_quan{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.gouwu_right{
	width: 90%;
	display: flex;
	flex-direction: column;
}
.gouwu_right dl{
	width: 100%;
	display: flex;
	flex-direction: row;
}
.gouwu_right dl dt{
	width: 30%;
}
 .xiao{
 	width: 70%;
 	flex: 1;
 	display: flex;
 	flex-direction:column;
 	position:relative;
	
 }
 .xiao-ding{
 	position: absolute;
 	right: 0;
 }
 .xiao span{
 	display: inline-block;
 	border: 1px solid #26A2FF;
 	border-radius: 5px;
 	margin: 0 15px 10px 15px;
 	padding: 0 10px;
 	
 }
</style>
